import React, { Component } from 'react'
import { Card, Select, Input, Button, Icon, Table } from 'antd'
import {reqProducts} from '../../api'
import { PAGE_SIZE } from '../../utils/constants';
const Option = Select.Option;

/**
 * Product的默认路由组件
 */
export default class ProductHome extends Component {
    state = {
        // 商品数组
        products: [

        ],
        total:100,    //总记录数
        loading:false
    }
    /**
     * 初始化table的列的数组
     */
    initColumns = () => {
        this.columns = [
            {
                title: '商品名称',
                dataIndex: 'name',
            },
            {
                title: '商品描述',
                dataIndex: 'desc',
            },
            {
                title: '价格',
                dataIndex: 'price',
                render: (price) => '¥' + price  // 当前指定了对应的属性, 传入的是对应的属性值
            },
            {
                width: 100,
                title: '状态',
                // dataIndex: 'status',
                render: (product) => {
                    const { status } = product
                    return (
                        <span>
                            <Button type='primary'>
                                {status === 1 ? '下架' : '上架'}
                            </Button>

                            <Button type='primary' disabled>
                                {status === 1 ? '在售' : '已下架'}
                            </Button>

                        </span>
                    )
                }
            },
            {
                width: 100,
                title: '操作',
                render: (product) => {
                    return (
                        <span>
                            {/*将product对象使用state传递给目标路由组件*/}
                            <a href="###" onClick={() => this.props.history.push('/product/detail', { product })}>详情</a>
                            <a href="###" onClick={() => this.props.history.push('/product/addupdate', product)}>修改</a>
                        </span>
                    )
                }
            },
        ];
    }
    componentWillMount() {
        this.initColumns()
    }

    componentDidMount() {

        this.getProducts(1)
    }
    /**
     *  获取指定页码的列表数据显示
     */
    getProducts = async (pageNum) => {
        this.pageNum = pageNum // 保存pageNum, 让其它方法可以看到
        
        this.setState({ loading: true }) // 显示loading
        const result = await reqProducts(pageNum,3);
        this.setState({loading:false})

        if(result.status === 0){
            const {list} = result.data;
            this.setState({
                total:100,
                products:list
            })
        }
        
    }

    render() {

        // 提取出状态中的数据
        const { products,total,loading } = this.state;

        const title = (
            <span>
                <Select value="1" style={{ width: 150 }}>
                    <Option value="1">按名称搜索</Option>
                    <Option value="2">按描述搜索</Option>
                </Select>
                <Input placeholder="关键字" style={{ width: 150, margin: '0 15px' }}></Input>
                <Button type="primary">搜索</Button>
            </span>
        )
        const extra = (
            <Button type="primary" onClick={() => this.props.history.push('/product/addupdate')}>
                <Icon type="plus"></Icon>
                添加商品
            </Button>
        )
        return (
            <Card title={title} extra={extra}>
                <Table 
                    rowKey="_id"
                    loading={loading}
                    dataSource={products} 
                    columns={this.columns}
                    pagination={{
                        total,
                        defaultPageSize:PAGE_SIZE,
                        onChange:(pageNum)=>{
                            this.getProducts(pageNum)
                        }
                    }}
                ></Table>
            </Card>
        )
    }
}